웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
커스텀 이벤트를 만들려고 합니다. 이벤트를 실행하기 위해서는 이벤트 핸들러가 필요하죠. 클릭이나 스크롤 이동, 브라우저 사이즈 등등 몇몇의 핸들러가 작동하게 될 경우 브라우저에 이를 알리고 함수를 실행하지만 이런 이벤트 핸들러 없이도 동작이 가능하게 하려면 trigger()메소드가 필요합니다.
$('selector').trigger('선택할 이벤트');
위와 같이 원하는 요소에 trigger() 메소드를 적용하고 선택할 이벤트를 인자로 넣어주면 됩니다. 그럼 아래 예제를 보세요.
# trigger() 예제 알아보기 아래는 trigger() 메소드를 사용하는 간단한 예제입니다. 먼저 css입니다.
.testEle {
width:100px;
height:100px;
background: #f80;
text-align:center;
color:#fff;
display:table-cell;
vertical-align:middle;
cursor:pointer;
}
#testEle2.testEle {
height:24px;
background:#333;
}
width:100px;
height:100px;
background: #f80;
text-align:center;
color:#fff;
display:table-cell;
vertical-align:middle;
cursor:pointer;
}
#testEle2.testEle {
height:24px;
background:#333;
}
다음은 html입니다.
<div class="testEle" id="testEle">
Click Num: <span id="testspan">0</span>
</div>
<div class="testEle" id="testEle2">Switch!</div>
Click Num: <span id="testspan">0</span>
</div>
<div class="testEle" id="testEle2">Switch!</div>
스크립트 코드입니다.
$('#testEle').on('click', function() {
++sumtest;
$('#testspan').text(sumtest);
});
$('#testEle2').on('click', function() {
$('#testspan').trigger('click');
});
++sumtest;
$('#testspan').text(sumtest);
});
$('#testEle2').on('click', function() {
$('#testspan').trigger('click');
});
위 코드를 실행하면 아래와 같이 나타나게됩니다.
Click Num: 0
Switch!
# 제이쿼리 trigger() 예제 설명 위 예제를 보면 첫번째 요소는 클릭이 가능하며 클릭시 숫자가 올라갑니다. 그리고 아래의 스위치 요소는 클릭 이벤트가 동작할 경우 자기 자신이 아닌 위에 있는 요소에 클릭 이벤트가 발생하도록 도와줍니다.
아래의 글도 찾고 계시지 않나요?
